<template>
    <div :class="[prefixCls+'-breadcrumb']">
      <template v-for="(item,index) in data">
          <router-link v-text="item.title"  :to="item.to" :key="item.title" v-if="item.to"></router-link>
          <span v-else :class="{'last-child':data.length==index+1}">{{item.title}}</span>
          <span v-text="separator" v-if="(data.length>index+1)" ></span>
      </template>
    </div>
</template>
<script>
import { prefixCls } from '../prefix'
import './breadcrumb.css';

export default {
    name: `${prefixCls}Breadcrumb`,
    props: {
        data:Array,
        separator:{
            type:String,
            default:'/'
        }
    },
    data() {
      return {
        prefixCls: prefixCls,
      }
    }
}
</script>